<template>
  <div class="user-maintenance">
    <div class="user-title">运维事件<span>已统计事件（最近一年）</span></div>
    <div style="display: flex; justify-content: space-between">
      <div
        v-if="flag"
        id="user-maintenance-line"
        :style="{ width: '100%', height: '250px' }"
      ></div>
      <!-- <div>
        <div class="user-maintenance-done">
          已处理事件（最近5条）
          <img @click="goMore" src="../../../assets/userindex/more.png">
        </div>
        <div class="user-maintenance-item" v-for="item in list">
          <div>【{{item.processDefinitionName}}】{{item.processInstanceName}}</div>
          <span>{{item.startTime.substring(0,10)}}</span>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
var option = null;
export default {
  name: "userIndex",
  components: {},
  data() {
    return {
      flag: true,
      list: [],
    };
  },
  watch: {},
  created() {},
  mounted() {
    // this.getDone()
    this.getTrend();
    // window.addEventListener("resize", () => {
    //   this.draw();
    // });
  },
  methods: {
    goMore() {
      this.$router.push({
        path: "/todoItem/done",
      });
    },
    getDone() {
      request({
        url: "/task/taskDoneList",
        method: "get",
        params: {
          pageNum: 1,
          pageSize: 5,
        },
      }).then((res) => {
        if (res.success) {
          this.list = res.rows;
        }
      });
    },
    getTrend() {
      request({
        url: "/homepage/user/yunweiTrend",
        method: "get",
      }).then((res) => {
        if (res.success) {
          this.line(res);
        }
      });
    },

    line(data) {
      let legendData = [],
        series = [];
      for (let key in data.values) {
        legendData.push(key);
        let obj = {
          name: key,
          type: "line",
          smooth: true,
          data: [],
        };
        data.values[key].forEach((item) => {
          obj.data.push(item.value || 0);
        });
        series.push(obj);
      }

      option = {
        color: ["#2e76ff", "#45c6fc", "#ff6161", "#f5d900", "#7d7d7d"],
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legendData,
        },
        grid: {
          top:'15%',//距上边距
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: data.trends,
        },
        yAxis: {
          type: "value",
        },
        series,
      };
      this.draw();
    },
    draw() {
      this.flag = false;
      setTimeout(() => {
        this.flag = true;
        setTimeout(() => {
          let myChart = this.$echarts.init(
            document.getElementById("user-maintenance-line")
          );
          myChart.setOption(option);
        }, 10);
      }, 10);
    },
  },
};
</script>

<style scoped lang="scss">
.user-maintenance {
  margin: 20px 0px 0 0px;
  background: white;
  border-radius: 6px;
  padding: 16px 16px 40px 16px;
  width: 48%;
  width: 700px;
  height: 284px;

  .user-title {
    border-left: 3px solid rgb(138, 205, 255);
    font-weight: bold;
    padding-left: 10px;
    margin-bottom: 10px;

    span {
      margin-left: 20px;
      color: rgb(88, 93, 164);
    }
  }

  .user-maintenance-done {
    color: rgb(88, 93, 164);
    display: flex;
    justify-content: space-between;

    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }

  .user-maintenance-item {
    width: 300px;
    margin-top: 7px;
    background: rgb(236, 238, 255);
    padding: 0 10px 0 4px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    line-height: 36px;

    div {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
